import React, { useEffect } from 'react';
import { Button, Drawer, Form, Input, Spin } from 'antd';
import { DrawerProps } from 'antd/es/drawer';
import styled from '@emotion/styled';
import { ErrorBox } from '@src/components/lib';
import { useAddEpic } from '@src/utils/epic';
import { useEpicsQueryKey } from '@src/screens/epic/util';
import { useProjectIdInUrl } from '@src/screens/kanban/util';

export const CreateEpic = (props: Pick<DrawerProps, 'open'> & { onClose: () => void }) => {
  const { mutate: addEpic, isLoading, error } = useAddEpic(useEpicsQueryKey());
  const [form] = Form.useForm();
  const projectId = useProjectIdInUrl();

  const onFinish = async (values: any) => {
    await addEpic({ ...values, projectId });
    props.onClose();
  };

  useEffect(() => {
    form.resetFields();
  }, [form, props.open]);

  return (
    <Drawer open={props.open} onClose={props.onClose} forceRender={true} destroyOnClose={true} width={'100%'}>
      <Container>
        {isLoading ? (
          <Spin size={'large'} />
        ) : (
          <>
            <h1>创建任务组</h1>
            <ErrorBox error={error} />
            <Form form={form} layout={'vertical'} style={{ width: '40rem' }} onFinish={onFinish}>
              <Form.Item label={'名称'} name={'name'} rules={[{ required: true, message: '请输入任务组名' }]}>
                <Input placeholder={'请输入任务组名称'} />
              </Form.Item>

              <Form.Item style={{ textAlign: 'right' }}>
                <Button loading={isLoading} type={'primary'} htmlType={'submit'}>
                  提交
                </Button>
              </Form.Item>
            </Form>
          </>
        )}
      </Container>
    </Drawer>
  );
};

const Container = styled.div`
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;
